<script setup>

// 我们的机型顶部区域适配
const { safeAreaInsets } = uni.getSystemInfoSync();

</script>

<template>
  <!-- 头部导航栏开始 -->
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!-- logo文字 -->
    <view class="logo">
      <!-- 首页字样 -->
      <view>
        <text class="home">识别</text>
      </view>
    </view>
  </view>
  <!-- 头部导航栏结束 -->

  <!-- 拍照区域开始 -->
  <view class="photograph_wraper">
    <!-- 中间照相机 -->
    <view class="center_photo">
      <view class="small_photo">
        <image src="../../static/images/photo.png" mode="scaleToFill" />
      </view>
    </view>
    <!-- 拍照上传文字字样 -->
    <view class="photo_upload"> 拍照上传</view>
    <view class="checked_photo">从照片中选择</view>
  </view>
  <!-- 拍照区域结束 -->

  <!-- identify可识别种类开始 -->
  <view class="identify_kind_wraper">
    <view class="identify_kind">可识别种类：</view>
    <!-- 种类列表图片 -->
    <view class="kind_list">
      <view class="kind_item">
        <!-- <image
          src="../../static/images/tree.png"
          mode="scaleToFill"
        /> -->
        <view class="imgs">
          <image src="../../static/images/tree.png" mode="scaleToFill" />
        </view>
        <text>树木</text>
      </view>
      <view class="kind_item">
        <!-- <image
          src="../../static/images/tree.png"
          mode="scaleToFill"
        /> -->
        <view class="imgs">
          <image src="../../static/images/huahui.png" mode="scaleToFill" />
        </view>
        <text>花卉</text>
      </view>
      <view class="kind_item">
        <!-- <image
          src="../../static/images/tree.png"
          mode="scaleToFill"
        /> -->
        <view class="imgs">
          <image src="../../static/images/cao.png" mode="scaleToFill" />
        </view>
        <text>杂草</text>
      </view>
      <view class="kind_item">
        <!-- <image
          src="../../static/images/tree.png"
          mode="scaleToFill"
        /> -->
        <view class="imgs">
          <image src="../../static/images/medicine.png" mode="scaleToFill" />
        </view>
        <text>草药</text>
      </view>
    </view>
  </view>
  <!-- identify可识别种类结束 -->
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  // height: 10000px;
  height: 100%;
}
/* 自定义导航条开始 */
.navbar {
  width: 100%;
  background-color: #4dc58e;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  height: 130rpx;
  .logo {
    display: flex;
    align-items: center;
    height: 64rpx;
    padding-left: 30rpx;
    padding-top: 20rpx;
    .logo-image {
      width: 166rpx;
      height: 39rpx;
    }
    .logo-text {
      // flex: 1;
      line-height: 28rpx;
      color: #fff;
      font-family: "华文新魏";
      font-size: 50rpx;
    }
    .home {
      margin-left: 300rpx;
      color: #fff;
      font-weight: bold;
    }
    
  }
  .search {
    position: relative;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    padding: 0 10rpx 0 26rpx;
    height: 64rpx;
    margin: 16rpx 20rpx;
    color: #fff;
    font-size: 28rpx;
    border-radius: 32rpx;
    background-color: rgba(255, 255, 255, 0.5);
  }
  .icon-search[placeholder] {
    position: relative;
    padding-left: 30rpx;
    font-size: 24rpx;
  }
  .icon-scan {
    position: absolute;
    top: 10rpx;
    left: 15rpx;
    width: 40rpx;
    height: 40rpx;
    background-color: red;
    background: url("../../static//搜索.png") no-repeat;
    background-size: cover;
  }
}
// 自定义导航条结束

// 拍照区域样式开始
.photograph_wraper {
  position: relative;
  width: 100%;
  height: 800rpx;
  background-color: #4dc58e;
  border-bottom-right-radius: 350rpx;
  // border: 1px solid red;
  box-sizing: border-box;
  border-bottom-left-radius: 350rpx;
  .center_photo {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450rpx;
    height: 450rpx;
    border-radius: 50%;
    // border: 50rpx solid rgba(0,0,0,.1);
    background-color: rgb(127, 217, 175);
    box-sizing: border-box;
    animation: light 2s ease-in-out infinite alternate;
    .small_photo {
      width: 350rpx;
      position: absolute;
      height: 350rpx;
      // background: red;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .photo_upload {
    position: absolute;
    bottom: 190rpx;
    left: 130rpx;
    width: 500rpx;
    height: 100rpx;
    border-radius: 50rpx;
    background-color: #fff;
    text-align: center;
    line-height: 100rpx;
    // font-weight: bold;
    color: #4dc58e;
  }
  .checked_photo {
    position: absolute;
    bottom: 120rpx;
    left: 275rpx;
    color: #fff;
    letter-spacing: 5rpx;
  }
}
// 拍照区域样式结束

// // 可识别种类样式开始
.identify_kind_wraper {
  // position: absolute;
  // width: 100%;
  height: 400rpx;
  // background-color: #bfa;
  padding: 0rpx 30rpx;
  overflow: hidden;
  .identify_kind {
    color: #333;
    margin-top: 20rpx;
    margin-top: 50rpx;
  }
  .kind_list {
    display: flex;
    justify-content: space-around;
    width: 690rpx;
    height: 400rpx;
    margin-top: 70rpx;
    // background-color: #ccc;
    .kind_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text {
        font-size: 25rpx;
        margin-top: 12rpx;
      }
      .imgs {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        background-color: green;
        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;

        }
      }
    }
  }
}
// 可识别种类样式结束
@keyframes light {
  from {
    box-shadow: 0rpx 0rpx 10rpx #fff;
  }
  to {
    box-shadow: 0rpx 0rpx 50rpx #fff;
  }
}
</style>
